<template>
	<view class="update-mask flex-center">
		<view class="content botton-radius"
			style="background-image: url('https://kimi.dingxians.cn/upload/20241229/677039b40130b.png');">
			<view class="gengxin_one_wenzi_box">发现新版本 v{{ data.edition_name }}</view>
			<view class="two_text_banben_box">当前版本：{{ version }}</view>
			<view class="gxnr_boxwezi">更新内容</view>
			<scroll-view scroll-y style="height: 100rpx;">
				<view class="huadongbox_box">
					<view class="gengxizs_box">{{ data.describe }}</view>
				</view>
			</scroll-view>
			<template v-if="updateBtn">
				<view class="dibu_box">
					<view class="shengji_an_box" @click="confirm">立即升级</view>
				</view>
			</template>
			<template v-if="!updateBtn">
				<view class="shengji_jindu_box">{{ percent }}%</view>
				<view class="jindutiao_box">
					<tn-line-progress :percent="percent" activeColor="#01BEFF"></tn-line-progress>
				</view>
				<view class="gengxinwenzi_box">
					正在下载，请稍后 ({{ downloadedSize }}/{{ packageFileSize }}M)
				</view>
			</template>
			<image v-if="cancleBtn" class="close-img" src="https://kimi.dingxians.cn/upload/20241229/677041e9349be.png"
				@click.stop="cancel"></image>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			version: '1.0.0',//当前运行版本(打包时manifest里的版本名称)
			percent: 0, //进度条百分比
			updateBtn: true, //是否显示立即更新
			cancleBtn: true, //是否显示取消按钮
			downloadedSize: 0,//当前已下载大小
			packageFileSize: 0,//安装包大小
			data: {
				describe: '1. 修复已知问题<br>2. 优化用户体验',
				edition_url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-6bef1fe3-e3e3-4909-9f0c-6ed9bd11c93b/aae2360a-6628-4c93-b873-ce1600b9a852.apk', //安装包下载地址或者通用应用市场地址
				edition_force: 1, //是否强制更新 0代表否 1代表是
				package_type: 0,//0是整包升级 1是wgt升级
				edition_name: '1.0.1' //后端返回的版本名称
			}
		};
	},
	onHide() { //解决应用切换到后台再次打开更新弹窗叠加多个的问题
		// console.log('切换到后台');
		this.data.edition_force = 0;
		uni.navigateBack({
			delta: 1
		})
	},
	onLoad({ obj }) {
		this.data = JSON.parse(obj);
		if (this.data.edition_force == 0) {
			this.cancleBtn = true;
		}
		plus.runtime.getProperty(plus.runtime.appid, (inf) => {
			this.version = inf.version;
		})
	},

	onBackPress() {
		// 强制更新不允许返回
		if (this.data.edition_force == 1) {
			return true;
		}
	},

	methods: {
		cancel() {
			//取消升级 返回上一页
			uni.navigateBack({
				delta: 1
			});
		},
		confirm() {
			if (this.data.package_type == 0) {
				//apk整包升级 下载地址必须以.apk结尾
				if (this.data.edition_url.includes('.apk')) {
					this.updateBtn = false;
					this.cancleBtn = false;
					this.download();

				} else {
					//外部下载 一般是手机应用市场或者其他h5页面
					this.data.edition_force = 0; // 解决跳转外部链接后，更新提示还在的问题
					plus.runtime.openURL(this.data.edition_url);
					uni.navigateBack({
						delta: 1
					});
				}
			} else {
				this.updateBtn = false;
				this.cancleBtn = false;
				//wgt资源包升级 下载地址必须以.wgt结尾
				this.download();
			}
		},
		download() {
			let package_type = this.data.package_type;
			let that = this;
			const downloadTask = uni.downloadFile({
				url: this.data.edition_url,
				success: res => {
					if (res.statusCode === 200) {
						plus.runtime.install(
							res.tempFilePath,
							{
								force: true //true表示强制安装，不进行版本号的校验；false则需要版本号校验，
							},
							function () {
								// console.log('success', success);
								if (package_type == 1) {
									plus.runtime.restart();
								}
							},
							function (e) {
								//提示部分wgt包无法安装的问题
								that.data.edition_force = 0;
								uni.showToast({
									title: e.message,
									icon: 'none',
									duration: 2500
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 2000)

							}
						);
						if (package_type == 0) {
							// 解决安装app点击取消，更新还在的问题
							this.data.edition_force = 0;
							uni.navigateBack();
						}
					}
				}
			});
			// 进度条
			downloadTask.onProgressUpdate(res => {
				this.percent = res.progress;
				this.downloadedSize = (res.totalBytesWritten / Math.pow(1024, 2)).toFixed(2);
				this.packageFileSize = (res.totalBytesExpectedToWrite / Math.pow(1024, 2)).toFixed(2);
			});

		}
	}
};
</script>

<style lang="scss">
page {
	background: transparent;
}

.flex-center {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	justify-content: center;
	align-items: center;
}

.update-mask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.65);
}

.botton-radius {
	border-bottom-left-radius: 30rpx;
	border-bottom-right-radius: 30rpx;
}

.content {
	position: relative;
	top: 0;
	width: 628rpx;
	min-height: 518rpx;
	background-size: 100% 100%;
	box-sizing: border-box;
	font-family: Source Han Sans CN;
	padding: 74rpx 58rpx 0 58rpx;

	.gengxin_one_wenzi_box {
		height: 38rpx;
		line-height: 38rpx;
		font-family: Source Han Serif CN;
		font-weight: 400;
		font-size: 40rpx;
		color: #FFFFFF;
		margin-bottom: 18rpx;
	}

	.two_text_banben_box {
		width: 147rpx;
		height: 20rpx;
		font-family: Source Han Serif CN;
		font-weight: bold;
		font-size: 20rpx;
		color: #999999;
		text-decoration: underline;
		margin-bottom: 43rpx;
	}

	.gxnr_boxwezi {
		height: 29rpx;
		line-height: 29rpx;
		font-family: Source Han Serif CN;
		font-weight: bold;
		font-size: 30rpx;
		color: #00E3FF;
		margin-bottom: 29rpx;
	}

	.huadongbox_box {
		width: 206rpx;
		height: 100rpx;
		font-family: Source Han Serif CN;
		font-weight: bold;
		font-size: 30rpx;
		color: #999999;
		overflow-x: auto;
		margin-bottom: 30rpx;

		.gengxizs_box {
			width: 206rpx;
			height: 40rpx;
			line-height: 40rpx;
			font-family: Source Han Serif CN;
			font-weight: bold;
			font-size: 30rpx;
			color: #999999;
		}
	}

	.dibu_box {
		width: 100%;
		height: 96rpx;

		.shengji_an_box {
			width: 324rpx;
			height: 96rpx;
			background-image: url('https://kimi.dingxians.cn/upload/20241229/67703db9d0766.png');
			background-size: 100% 100%;
			margin: auto;
			text-align: center;
			line-height: 96rpx;
			font-family: Source Han Serif CN;
			font-weight: bold;
			font-size: 40rpx;
			color: #FFFFFF;
		}
	}

	.shengji_jindu_box {
		width: 486rpx;
		height: 25rpx;
		font-family: Source Han Serif CN;
		font-weight: bold;
		font-size: 26rpx;
		color: #FFFFFF;
		text-align: right;
		margin: auto;
		margin-bottom: 6rpx;

	}

	.jindutiao_box {
		width: 486rpx;
		height: 30rpx;
		margin-bottom: 16rpx;
	}

	.gengxinwenzi_box {
		width: 100%;
		text-align: center;
		line-height: 33rpx;
		height: 33rpx;
		font-family: Source Han Serif CN;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
	}
}

.close-img {
	width: 70rpx;
	height: 70rpx;
	z-index: 1000;
	position: absolute;
	bottom: -120rpx;
	left: calc(50% - 70rpx / 2);
}
</style>
